<template>
  <div class="search-page">
    <el-row>
      <el-col :span="4">
        <nuxt-link to="/">
          <img src="/imgs/home_icon.jpg" alt="logo" class="logo">
        </nuxt-link>
      </el-col>
      <el-col :span="16">
        <div class="search-container">
          <div class="search-box">
            <i class="el-icon-search" />
            <input type="text">
            <button>搜索</button>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="img-container">
          <div>作者微信二维码</div>
          <img src="/imgs/ercode.jpg" alt="ercode">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="stylus" scoped>
.el-row{
  position static
}
.search-page
  margin-top 50px
  .logo
    cursor pointer
  .search-container
    background #fff
    padding-top 15px
    .search-box
      width 450px
      background #e67e22
      height 55px
      margin 0 auto
      line-height 55px
      text-align center
      border-radius 10px
      position relative
      i
        position absolute
        left 15px
        top 17px
        font-size 20px
        color #bdc3c7
      input
        height 35px
        border-radius 8px
        width 75%
        padding 0 0 0 28px
        outline none
        font-size 15px
      button
        height 35px
        width 14%
        border-radius 8px
        background #fff
        padding 0
        outline none
        &:hover
          cursor pointer
  .img-container
    border 1px solid #bdc3c7
    text-align center
    width 50%
    div
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
    img
      width 85px
</style>
